<template>
  <div class="head_box unselect">
    <audio id="myAudio" :src="audioUrl" ref="music" @ended="bfwc(audioUrl)">
      您的浏览器不支持 audio 元素 -正在播放{{ audioUrl }}
    </audio>

    <img src="@/images/head_box.png" class="head_boxback" v-show="headshow" />
    <img :src="headimg" class="head_left" />

    <div class="head_pre" v-if="btname != ''" @click="preFn(btrouter)">
      <img
        src="@/images/pres.png"
        alt="返回上一级"
        class="head_preimg"
        v-if="btname != ''"
      />
      {{ btname }}
    </div>
    <div class="head_right clearfix">
      <div class="head_rightmenuitem clearfix sdzflog">
        山东中飞科技有限公司•研发
      </div>
      <div
        v-show="headshow"
        class="head_rightmenuitem clearfix head_rightmenuitems"
        @click.stop="prehomefn"
        title="首页"
      >
        <img src="@/images/prehome.png" class="normal" />
        <img src="@/images/prehome.png" class="active" />
      </div>
      <div
        class="head_rightmenuitem clearfix"
        @click="audoFn"
        title="静音"
        v-if="!audo"
      >
        <img src="@/images/head_rightmenuitem1.png" />
        <!-- <img src="@/images/head_rightmenuitem1_ac.png" class="active" /> -->
      </div>
      <div
        class="head_rightmenuitem clearfix"
        @click="audoFns"
        title="取消静音"
        v-if="audo"
      >
        <!-- <img src="@/images/head_rightmenuitem1.png" class="active" /> -->
        <img src="@/images/head_rightmenuitem1_ac.png" />
      </div>

      <div
        class="head_rightmenuitem clearfix head_rightmenuitems"
        @click.stop="closeFn"
        title="退出"
      >
        <img src="@/images/head_rightmenuitem4ac.png" class="normal" />
        <img src="@/images/head_rightmenuitem4ac.png" class="active" />
      </div>
    </div>
    <!-- <div
      class="foot_tips animate__animated animate__fadeInLeft"
      v-if="audioText"
    >
      <img src="@/images/foot_tipsback.png" class="foot_tipsback" />
       <div class="foot_tipstext hiddenScroll">
        {{ audioText }}
      </div> 
    </div> -->
  </div>
</template>
<script>
export default {
  props: {
    audioUrl: String,
    auplay: Boolean,
    headshow: {
      default: true
    },
    headimg: String,
    btname: {
      default: ''
    },
    btrouter: {
      default: ''
    }
  },
  data() {
    return {
      isFull: false,
      audo: false //是否静音
    }
  },
  watch: {
    audioUrl(val) {
      let realAudio = this.$refs.music

      //根据index播放提示音频
      //  && this.auplay
      if (val) {
        this.$nextTick(() => {
          realAudio.play()
          console.log('播放了音频', this.audioUrl)
        })
        // 解决频繁切换过程中异步调用报错问题
        // let playPromise = realAudio.play()
        // if (playPromise !== undefined) {
        //   playPromise.then(() => {}).catch(() => {})
        // }
      } else {
        realAudio.pause()
      }
    },
    audo: {
      handler(i) {
        var element = document.querySelectorAll('video, audio')
        console.log('页面静音', i)
        if (i) {
          element.forEach((item) => {
            item.muted = true
            console.log('执行了页面静音')
          })
        } else {
          element.forEach((item) => {
            item.muted = false
            console.log('关闭页面静音')
          })
        }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    // 返回上一级标题跳转
    preFn(i) {
      this.$router.push({
        name: i
      })
    },
    // 背景音乐播放按钮{}
    bgmFn() {
      let realAudio = this.$refs.musics
      realAudio.play()
    },
    //关闭按钮
    closeFn() {
      if (
        navigator.userAgent.indexOf('Firefox') != -1 ||
        navigator.userAgent.indexOf('Chrome') != -1
      ) {
        window.location.href = 'about:blank'
        window.close()
      } else {
        window.opener = null
        window.open('', '_self')
        window.close()
      }
    },
    //静音按钮
    audoFn() {
      var element = document.querySelectorAll('video, audio')

      element.forEach((item) => {
        item.muted = true
      })

      this.audo = true
    },
    //取消静音按钮
    audoFns() {
      var element = document.querySelectorAll('video, audio')
      element.forEach((item) => {
        item.muted = false
      })

      this.audo = false
    },
    fullScreenAll() {
      let docElm = document.querySelector('#app')

      if (this.isFull) {
        this.isFull = false
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
      } else {
        this.isFull = true
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen()
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        }
      }
    }, //播放完成
    bfwc(i) {
      this.$emit('bfwc', i)
      //HAISHEN 1GE XIAO SHI AI HAHA
      console.log('播放完成')
    },
    vidomet() {
      var element = document.querySelectorAll('video, audio')
      console.log('页面静音', this.audo)
      if (this.audo) {
        element.forEach((item) => {
          item.muted = true
          console.log('执行了页面静音')
        })
      } else {
        element.forEach((item) => {
          item.muted = false
          console.log('关闭页面静音')
        })
      }
    },
    prehomefn() {
      console.log(this.$route)
      if (this.$route.name != 'index') {
        this.$router.push({
          name: 'index'
        })
      }
    }
  }
}
</script>
<style></style>
